<template>
  <div>
    <nav-component
      logo-name="MY_LOGO"
      :nav-data="myNavData"
    />

    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide
        v-for="(item, index) in banners"
        :key="index"
      >
        <div style="height: 300px; overflow: hidden">
          <img style="width: 100%" :src="item.image" :alt="item.title">
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>

    <div class="list">
      <div
        class="item"
        v-for="(item, index) in girls"
        :key="index"
      >
        <div class="title">{{item.title}}</div>
        <div class="author">{{item.author}}-{{item.category}}</div>
        <img @click="linkToGirl(item._id)" :src="item.url" alt="">
        <div class="desc">{{item.desc}}</div>
      </div>
    </div>
    <div style="padding: 20px">
      <button
        v-if="hasNextPage"
        class="load-more"
        @click="loadMore"
      >加载更多</button>
      <div style="text-align: center" v-else>
        我是有底线的
      </div>
    </div>
    <div v-if="isLoading" class="loading">
      <i class="fa fa-spinner fa-3x fa-spin"></i>
    </div>
  </div>
</template>

<script>
import NavComponent from "@/components/NavComponent";
import {mapState} from 'vuex'

export default {
  name: "Home",
  components: {
    NavComponent,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        loop: true,
      },
      banners: [],
      isPlay: false,
      songs: [],
      num: 1000,
      msg: 'hello vue',
      hasNextPage: true,
      isLoading: false,
      myNavData: [
        {
          text: '首页',
          url: 'javascript:void(0)'
        },
        {
          text: '妹纸',
          url: 'javascript:void(0)'
        },
        {
          text: '干货',
          url: 'javascript:void(0)'
        },
        {
          text: '❤新版进度❤',
          url: 'javascript:void(0)'
        },
      ]
    }
  },
  computed: {
    ...mapState('girls', ['girls']),
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted() {
    // console.log('Current Swiper instance object', this.swiper)
    this.swiper.slideTo(3, 1000, false)
  },
  created() {
    this.getGirls()
  },
  methods: {
    linkToGirl(id) {
      this.$router.push({
        name: 'Girl',
        params: {id}
      })
    },
    async getGirls() {
      try {
        this.isLoading = true
        await this.$store.dispatch('girls/getGirlsAction')
      } catch (e) {
        console.log(e)
      } finally {
        this.isLoading = false
      }
    },
    async loadMore() {
      try {
        this.isLoading = true
        await this.$store.dispatch('girls/getNextGirlsAction')
      } catch (e) {
        console.log(e)
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

<style scoped>
.item {
  border: 1px solid cadetblue;
  padding: 20px;
}

.item .title {
  font-size: 24px;
  font-weight: bold;
}

.item img {
  width: 200px;
}

.item .desc {
  background-color: #42b983;
  padding: 10px;
  color: #fff;
  font-size: 20px;
}

.load-more {
  display: block;
  margin: 0 auto;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .3);
}

.nav-component .logo {
  color: #f00;
}

.swiper-button-prev,
.swiper-button-next {
  color: #ff0000;
}
</style>